<template>
  <div class="link-form">
    <div class="top">
      <div style="flex-shrink: 0;"><Title :element="element" isTable /></div>
      <div v-if="element.options.required" class="is-required">*</div>
      <div v-if="element.options && element.options.tip" class="tip">{{ element.options.tip }}</div>
      <div class="flex"/>
      <PlainCreateBtn>添加</PlainCreateBtn>
      <el-button size="small" class="delete-btn">删除</el-button>
    </div>
    <div v-if="element.options && element.options.isStatistics && statistics.length" class="statistics-list">
      <dataDisplay
        :data-list="statistics"
        type="row"
        style="width:100%;"/>
    </div>
    <div class="table-list">
      <!-- <el-scrollbar class="scrollbar"> -->
      <div class="subtable-container scroll">
        <div class="col-num-item">
          <div class="title center"><el-checkbox v-model="checked" class="no-label"><span/></el-checkbox></div>
          <!-- <div class="value center"><el-checkbox v-model="checked" class="no-label"><span/></el-checkbox></div> -->
        </div>
        <div class="col-num-item">
          <div class="title center">序号</div>
          <!-- <div class="value center">1</div> -->
        </div>
        <div class="col-item">
          <div class="title">
            <draggable
              v-model="element.subform"
              v-bind="{ group: 'linkForm', ghostClass: 'linkFormGhost', animation: 200, handle: '.title-item' }"
              class="link-form-draggable"
              item-key="name"
            >
              <div v-for="(item) in element.subform" :key="item.key" class="title-item ellipsisOne">
                {{ item.name }}
              </div>
            </draggable>
          </div>
          <div class="value" style="margin-left: -100px;">暂无数据</div>
        </div>
      </div>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script>
/**
 * 关联表单 - 只用作预览
 */
import { mapState } from 'vuex';
import Title from './Title';
import draggable from 'vuedraggable';
import incomeAmount from '@/assets/dataDisplay/icon_45.png';
import { getConfigData } from '@/components/Common/relatedProcess/data';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import { isNumberType } from '@/utils/formMakeUtils.js';
export default {
  name: 'LinkForm',
  components: { Title, draggable, dataDisplay },
  props: {
    element: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      checked: false
    };
  },
  computed: {
    ...mapState({
      'selectWidget': state => state.formMake.selectWidget
    }),
    statistics() {
      const keys = [];
      if (this.element.options.remoteParams.isCustom) {
        this.element.subform.forEach(i => {
          if (isNumberType(i) || i.type === 'statistics') {
            keys.push({ data: null, label: i.name + '：', icon: incomeAmount, key: i.key });
          }
        });
      } else if (this.configData && this.configData.numberField) {
        this.configData.numberField.forEach(i => {
          const hasKey = this.element.subform.some(sub => sub.key === i.key);
          if (hasKey) keys.push({ data: null, label: i.name + '：', icon: incomeAmount, key: i.key, _unit: i.unit });
        });
      }
      return keys;
    },
    configData() {
      if (!this.element || !this.element.options || !this.element.options.remoteParams) return null;
      const type = this.element.options.remoteParams.type;
      return getConfigData(type);
    }
  }
};
</script>

<style lang="scss" scoped>
.link-form {
  padding: 0 12px;
  .top {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }
  .tip {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .flex {
    flex:1;
  }
  .delete-btn {
    color: #666666;
    border-color: #ddd;
    background-color: #fff;
    padding: 7px 8px;
  }
}
.table-list {
  border: 1px solid #ebeef5;
  .title {
    background-color: #f8f8f9;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 41px;
    white-space: nowrap;
    font-weight: 550;
    color: #141c3d;
    font-size: 14px;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .value {
    background-color: #fff;
    padding: 12px 5px;
    font-size: 14px;
    text-align: center;
    color: #999;
    flex: 1;
    position: relative;
  }
}
.linkFormGhost {
  background: #F56C6C;
  width: 3px;
  height: 41px;
  box-sizing: border-box;
  font-size: 0;
  content: '';
  overflow: hidden;
  padding: 0;
}
.subtable-container {
  display: flex;
  background-color: #fff;
  .col-num-item {
    flex-shrink: 0;
    border-right: 1px solid #ebeef5;
    display: flex;
    flex-direction: column;
    width: 50px;
    min-width: auto;
  }
  .col-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    .title-item {
      border-right: 1px solid #ebeef5;
      cursor: move;
      padding: 0 10px;
      max-width: 240px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
  .link-form-draggable {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
  }
}
.center {
  text-align: center;
  justify-content: center;
}
.no-label {
  &::v-deep {
    .el-checkbox__label {
      display: none !important;
    }
  }
}
.scroll {
  @include scrollBar($x: auto, $y: hidden);
}
.statistics-list {margin-bottom: 12px;}
.is-required {
  color: #F56C6C;
  margin-left: 3px;
}
</style>
